import { Modal, Radio, Form, Select, Input } from 'antd'
import React from 'react'

export default function CreateData(props) {
  const [form] = Form.useForm();

  function onOk() {
    form.validateFields()
    .then(values => {
      console.log(values);
    })
    .catch(e => console.log(e));
  }

  return (
    <Modal
      visible={props.visible}
      title="添加数据"
      onCancel={() => props.setVisible(false)}
      onOk={onOk}
      width={400}
      getContainer={false}
    >
      <Form form={form}>
        <Form.Item
          label="坐标格式"
          name="coordType"
          rules={[{ required: true, message: '请选择坐标格式' }]}
        >
          <Select placeholder="请选择坐标格式">
            <Select.Option value="WKT">WKT</Select.Option>
            <Select.Option value="GeoJSON">GeoJSON</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          label="数据名称"
          name="dataName"
          rules={[{ required: true, max: 10, message: '数据名称不能为空且至多10位' }]}
        >
          <Input placeholder="请输入数据名称" />
        </Form.Item>
        <Form.Item
          label="坐标"
          name="geometry"
          rules={[{ required: true}]}
          extra="坐标必须为标准WGS84坐标"
        >
          <Input.TextArea placeholder="请输入坐标"/>
        </Form.Item>
      </Form>
    </Modal>
  )
}